<template>
  <div class="ts-manager">
    <ts-header title="提现管理" back></ts-header>
    <ts-group>
      <ts-cell type="menu" mode="edit" isLink style="height:1.10rem;" title="银行卡" @click="goEdit(1)">
        <div slot="menuValue" class="menu-value">
          <p>{{bank.name || ''}}</p>
          <p>{{bank.card || ''}}</p>
        </div>
        <span class="menu-tips" slot="menuTips">{{bank.card ? '' : tips}}</span>
      </ts-cell>
    </ts-group>
    <ts-group>
      <ts-cell type="menu" mode="edit" isLink title="微信" @click="goEdit(3)">
        <div slot="menuValue">
          <img class="wechat" v-if="wechat.wx_qrcode" :src="wechat.wx_qrcode"/>
          <span v-else></span>
        </div>
        <span class="menu-tips" slot="menuTips">{{wechat.wx_qrcode ? '' : tips}}</span>
      </ts-cell>
    </ts-group>
    <ts-group>
      <ts-cell type="menu" mode="edit" isLink title="支付宝" @click="goEdit(2)">
        <div slot="menuValue">
          {{alipay.card || ''}}
        </div>
        <span class="menu-tips" slot="menuTips">{{alipay.card ? '' : tips}}</span>
      </ts-cell>
    </ts-group>
    <transition name="slide-child">
      <router-view class="child-route child-style"></router-view>
    </transition>
  </div>
</template>

<script>
  import {GET_BANK_LIST} from '../../assets/js/api'

  export default {
    name: 'meansManager',
    data() {
      return {
        tips: '去添加',
        bank: {},
        wechat: {},
        alipay: {}
      }
    },
    created() {
      //展现提现方式
      this.getBankList();
    },
    async activated() {
//      const json = await this.$http.post(GET_BANK_LIST);
//      const lists = json.data.lists;
//      console.log(json.data)
//      if(json.data.lists.length!==0){
//        for (let item of lists) {
//          switch (item.types) {
//            case 1:
//              this.bank = item;
//              break;
//            case 2:
//              this.alipay = item;
//              break;
//            case 3:
//              this.wechat = item;
//              break;
//          }
//        }
//      }
    },
    deactivated(){

    },
    destroyed(){

    },
    beforeCreate(){

    },
    async beforeRouteUpdate(to, from, next){
      const json = await this.$http.post(GET_BANK_LIST);
      const lists = json.data.lists;
      if(json.result===1){
        if(json.data.lists.length!==0){
          for (let item of lists) {
            switch (item.types) {
              case 1:
                this.bank = item;
                break;
              case 2:
                this.alipay = item;
                break;
              case 3:
                this.wechat = item;
                break;
            }
          }
        }
      }
      next()
    },
    methods: {
      async getBankList() {
        const json = await this.$http.post(GET_BANK_LIST);
        const lists = json.data.lists;
        for (let item of lists) {
          switch (item.types) {
            case 1:
              this.bank = item;
              break;
            case 2:
              this.alipay = item;
              break;
            case 3:
              this.wechat = item;
              break;
          }
        }
      },
      goEdit(action) {
        const baseUrl = 'meansManager';
        switch (action) {
          case 1:
            this.$router.replace({
              path: baseUrl + '/bankCard', query: {
                bank: this.bank.bank || '',
                card: this.bank.card || '',
                name: this.bank.name || ''
              }
            });
            break;
          case 2:
            this.$router.replace({
              path: baseUrl + '/alipay', query: {
                card: this.alipay.id || ''
              }
            });
            break;
          case 3:
            this.$router.replace({
              path: baseUrl + '/wechat', query: {
                card: this.wechat.wx_qrcode || ''
              }
            });
            break;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";

  .child-style {
    background-color: #F7F7F7;
  }

  .wechat {
    @include wh(.57rem, .57rem);
    position: relative;
    top: .05rem;
  }

  .ts-manager {
    .ts-cells {
      margin-bottom: .20rem;
      .ts-cell {
        @include fja();
        height: .90rem;
        padding: 0 .24rem;
      }
      .ts-cell-title {
        .ts-label {
          @include sc(.30rem, #020202);
        }
      }
    }
    .menu-value {
      color: #020202;
      position: relative;
      top: .05rem;
      line-height: 1.4;
    }
  }
</style>
